<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改滚动条颜色</title>
    <style type="text/css">
    	body{
            margin: 0;
            padding: 0;
            background-color: #F3F3F3;
            font-size: 14px;
            font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
            letter-spacing: 0;
            color: #333333;
    	}
    	div{
            width: 200px;
            height: 200px;
            padding: 20px;
            overflow: auto;
            margin: 50px auto;
    	}
        
        /* IE 浏览器 */
        .scrollbar{
            /*三角箭头的颜色*/
            scrollbar-arrow-color: #fff;
            /*滚动条滑块按钮的颜色*/
            scrollbar-face-color: #0099dd;
            /*滚动条整体颜色*/
            scrollbar-highlight-color: #0099dd;
            /*滚动条阴影*/
            scrollbar-shadow-color: #0099dd;
            /*滚动条轨道颜色*/
            scrollbar-track-color: #0066ff;
            /*滚动条3d亮色阴影边框的外观颜色——左边和上边的阴影色*/
            scrollbar-3dlight-color:#0099dd;
            /*滚动条3d暗色阴影边框的外观颜色——右边和下边的阴影色*/
            scrollbar-darkshadow-color: #0099dd;
            /*滚动条基准颜色*/
            scrollbar-base-color: #0099dd;
        }
 
        /* chrome & safari 浏览器 */
        /*滚动条整体部分,必须要设置*/
        .scrollbar::-webkit-scrollbar{
            width: 10px;
            height: 10px;
            background-color: #0099ff;
        }
        /*滚动条的轨道*/
        .scrollbar::-webkit-scrollbar-track{
            background-color: #0099ff;
        }
        /*滚动条的滑块按钮*/
        .scrollbar::-webkit-scrollbar-thumb{
            border-radius: 0;
            background-color: #f00;
            box-shadow: inset 0 0 5px #f00;
        }
        /*滚动条的上下两端的按钮*/
        .scrollbar::-webkit-scrollbar-button{
            height: 0;
            background-color: #0099ff;
        }
    </style>
</head>
	<body>
		<div class="scrollbar">
			<h3>1846492969</h3>
			<h3>helang.love@qq.com</h3>
			<h3>web-7258</h3>
			<h3>WEB前端梦之蓝</h3>
			<h3>1846492969</h3>
			<h3>helang.love@qq.com</h3>
			<h3>web-7258</h3>
			<h3>WEB前端梦之蓝</h3>
		</div>
	</body>
</html>